<template>
	<view class="putstorage">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="sel-wrap">
			<view :class="selVal==1?'active inventory':'inventory'" @click="changeVal1">库存</view>
			<view :class="selVal==2?'active inventory':'inventory'" @click="changeVal2">记录</view>
		</view>

		<template v-if="selVal==2">
			<view style="background-color: #F0F2F5;width: 100vw;height:8rpx">
			</view>
			<view class="select-wrap">
				<view class="ipt-wrap">
					<uni-datetime-picker type="date" v-model="params.startdate" />
					<button class="search" @click="getDataList2">查询</button>
				</view>
				<view class="sele-wrap">
					<uni-data-select v-model="params.devicetype" placeholder="涉废类型"
						:localdata="adviceTypeList"></uni-data-select>
					<uni-data-select class="two" placeholder="涉废代码" v-model="params.wastecode"
						:localdata="wasteCodeList"></uni-data-select>
				</view>
			</view>
			<view class="list">
				<noData v-if="dataList.length==0" />
				<view class="item" v-for="item in dataList" :key="item.id">
					<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/beijing-icon.png"
						mode=""></image>
					<view class="title">涉废类型：{{adviceTypeList.find(i=>i.value==item.wastetype)?.text}}</view>
					<view class="name">设施名称：{{item.devicename}}</view>
					<view class="num">设施编号：{{item.devicecode}}</view>

					<view class="content-wrap">
						<view class="wrap">
							<view>
								<view class="left">涉废类型：{{adviceTypeList.find(i=>i.value==item.wastetype)?.text}}</view>
								<view class="right">
									涉废代码：{{wasteCodeList.find(i=>i.value==item.wastecode)?.text.split('(')[1].split(')')[0]}}
								</view>
							</view>
							<view>
								<view class="left">本次更换量：{{item.putoutnum}}kg</view>
								<view class="right">本次填充量：{{item.putinnum}}kg</view>
							</view>
							<view>
								<view class="left">碘值：{{item.dianval}}</view>
								<view class="right">使用周期：{{item.circledays}}天</view>
							</view>
							<view>
								<view class="left">入库时间：{{item.committime}}</view>
								<view class="right"></view>
							</view>
						</view>

					</view>
					<view class="photo-wrap">
						<view class="line">
							<view @click="searchImage(item.changebeforeimgurl)">
								更换前图片：<text>点击查看</text>
							</view>
							<view @click="searchImage(item.changemidimgurl)">
								更换中图片：<text>点击查看</text>
							</view>
						</view>
						<view class="line">
							<view @click="searchImage(item.changeafterimgurl)">
								更换后图片：<text>点击查看</text>
							</view>

						</view>
						<view class="line">
							<view @click="searchImage(item.imgdianvalurl)">
								碘值监测报告图片：<text>点击查看</text>
							</view>
						</view>
						<view class="line">
							<view @click="searchImage(item.imgticketurl)">
								相关发票图片：<text>点击查看</text>
							</view>
						</view>
						<view class="line">
							<view @click="searchImage(item.imgstockkeepurl)">
								入库暂存照片：<text>点击查看</text>
							</view>
						</view>

					</view>
				</view>


			</view>

		</template>
		<template v-if="selVal==1">
			<view style="background-color: #F0F2F5;width: 100vw;height:16rpx">
			</view>
			<view class="wrap">
				<view class="title-wrap">
					<view class="type">废物类型</view>
					<view class="waste-types">废物种类</view>
					<view class="stock">库存量</view>
				</view>
				<view class="scroll">
					<noData v-if="dataList.length==0" />
					<view class="item" v-for="item in dataList" :key="item.id">
						<view class="type">{{item.wastetypename}}</view>
						<view class="waste-types">危险废物</view>
						<view class="stock">{{item.putoutnum}}{{item.wasteunitname}}</view>
					</view>



				</view>
			</view>
		</template>
	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import noData from '../../components/noDataShow.vue'
	import http from '../../request/index.js'
	import {
		ref,
		reactive
	} from 'vue'
	let name = "入库"
	let selVal = ref('1')
	let params = reactive({})
	let single = ''
	let wasteCodeList = ref([])
	let adviceTypeList = ref([])
	let dataList = ref([])
	let getDataList1 = () => {
		http({
			url: '/stocksum/stockKeepInfo',
			data: {}
		}).then((res) => {
			if (res.code == 0) {
				dataList.value = res.data.list
			}
			uni.hideLoading()
		})
	}
	let getDataList2 = () => {
		params.enddate = params.startdate
		http({
			url: '/stock/datalist',

			data: {
				...params,


			}
		}).then((res) => {
			if (res.code == 0) {
				dataList.value = res.data.list
			}
			uni.hideLoading()
		})
	}
	let changeVal1 = () => {
		selVal.value = 1
		dataList.value.length = 0
		uni.showLoading({
			title: '请求中...'
		})
		getDataList1()
	}
	let changeVal2 = () => {
		selVal.value = 2
		dataList.value.length = 0
		uni.showLoading({
			title: '请求中...'
		})
		getDataList2()

	}

	let searchImage = (images) => {
		console.log(images);
		uni.previewImage({
			urls: images.split(','),
			current: 0
		})
	}

	getDataList1()
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B03'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data

			adviceTypeList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}

	})
	http({
		url: '/wasteCode/getListItems'
	}).then((res) => {
		if (res.code == 0) {
			wasteCodeList.value = res.data.map((item) => {
				return {
					...item,
					text: item.wastecode + `(${item.wastetypename})`,
					value: item.wastecode
				}
			})
		}
	})
</script>

<style lang="scss" scoped>
	:deep(.uni-date) {
		height: 100% !important;
		border: none !important;
	}

	:deep(.uni-date-editor) {
		height: 100% !important;
		border: none !important;
	}

	:deep(.uni-date-x) {
		height: 100% !important;
		border: none !important;
	}

	:depp(.uni-select__selector) {
		width: 410rpx !important;

	}

	:deep(.uni-select__selector-scroll) {
		width: 410rpx !important;
	}

	:deep(.uni-date-editor--x) {
		height: 100% !important;
		border: none !important;
	}

	:deep(.uni-date__x-input) {

		font-weight: 400;
		font-size: 25rpx;
		color: #999999;

	}

	:deep(.uni-select__input-text) {

		font-weight: 400;
		font-size: 28rpx;
		color: #333333;

	}



	:deep(.uniui-clear) {

		font-size: 36rpx !important;
	}

	:deep(.uni-icons) {
		margin-left: 4rpx;
		font-size: 36rpx !important;
	}

	:deep(.uni-select) {
		border: none;
		width: 200rpx;
		width: 137rpx;

		font-weight: 400;
		font-size: 28rpx;
		color: #333333;

		& view:nth-of-type(3) {
			width: 410rpx;
		}
	}

	.putstorage {
		width: 100vw;
		height: 100vh;
		padding-top: 160rpx;
		overflow: hidden;

		.title-bgc {
			background: #0874FA;
			height: 160rpx;
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
		}

		.list {
			height: calc(100vh - 160rpx - 8rpx - 95rpx - 192rpx);
			width: 100%;
			overflow-y: scroll;
			background-color: #F0F2F5;
			padding-top: 16rpx;
			padding-bottom: 60rpx;

			.item:first-child {
				margin-top: 0 !important;
			}

			.item {
				position: relative;
				width: 690rpx;

				background: #FFFFFF;
				border-radius: 14rpx;
				margin: 0 auto;

				margin-top: 24rpx;
				height: auto;

				.name,
				.num {
					padding-left: 33rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					margin-top: 35rpx;
				}

				image {
					position: absolute;
					height: 25rpx;
					width: 100%;
					top: 81rpx;
					left: 0;
				}

				.title {

					font-weight: 500;
					font-size: 31rpx;
					color: #333333;
					height: 93rpx;
					line-height: 93rpx;

					padding-left: 33rpx;
				}


				.photo-wrap {
					padding: 0 47rpx 32rpx 36rpx;
					width: 100vw;

					.line {
						width: 100vw;

						height: 26rpx;
						margin-top: 36rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding-right: 47rpx;

						view {
							width: 100vw;

							text {
								color: #0874FA;
							}
						}
					}
				}

				.content-wrap {
					padding: 24rpx 20rpx 0 16rpx;

					.wrap {
						width: 100%;
						height: 280rpx;
						background: #E5EAEF;
						border-radius: 14rpx;
						padding: 0;
						padding-left: 20rpx;
						padding-right: 34rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;

						view {
							display: flex;
							justify-content: space-between;
							align-items: center;

							font-weight: 400;
							font-size: 28rpx;
							color: #666666;

							.left {}

							.right {}
						}
					}

				}
			}
		}

		.select-wrap {
			height: 192rpx;

			.ipt-wrap {
				display: flex;
				width: 690rpx;
				height: 75rpx;
				background: #FFFFFF;
				border-radius: 14rpx;
				border: 1px solid #E5E5E5;
				margin-left: 28rpx;
				margin-top: 30rpx;
				padding-left: 25rpx;

				button {
					width: 112rpx;
					height: 74rpx;
					background: #0874FA;
					border-radius: 14rpx;

					font-weight: 500;
					font-size: 31rpx;
					color: #FFFFFF;
					margin: 0;
					padding: 0;
				}
			}

			.sele-wrap {
				display: flex;
				height: 114rpx;
				// line-height: 100%;
				align-items: center;
				padding-left: 47rpx;

				.two {
					margin-left: 100rpx;
				}
			}
		}

		.wrap {
			padding: 29rpx 72rpx 50rpx 52rpx;

			.item {
				display: flex;
				height: 61rpx;

				view:nth-of-type(3) {
					border-right: 2rpx solid #BFBFBF;
				}

				view:nth-of-type(1) {
					border-left: 2rpx solid #BFBFBF;
				}

				view:nth-of-type(2) {
					border-left: 2rpx solid #BFBFBF;
					border-right: 2rpx solid #BFBFBF;
				}

				view {

					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
					flex: 1;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
					border-bottom: 2rpx solid #BFBFBF;

				}
			}

			.scroll {
				height: calc(100vh - 96rpx - 160rpx - 16rpx - 100rpx);
				overflow: scroll;
			}

			.title-wrap {
				width: 100%;
				display: flex;
				justify-content: space-between;

				background: #F3F5F7;
				border: 1px solid #BFBFBF;

				height: 67rpx;
				line-height: 67rpx;

				view:nth-of-type(2) {
					border-left: 2rpx solid #BFBFBF;
					border-right: 2rpx solid #BFBFBF;

				}

				view {

					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					flex: 1;
					text-align: center;

				}
			}
		}

		.sel-wrap {
			height: 95rpx;
			background-color: #fff;
			padding: 0 204rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.inventory,
			.record {
				position: relative;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;

			}

			.active {
				position: relative;

				font-weight: bold;
				font-size: 30rpx;
				color: #000000;


				&:before {
					position: absolute;
					content: '';
					width: 48rpx;
					height: 8rpx;
					background: #0874FA;
					border-radius: 4rpx;
					bottom: -6rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}

		}



	}
</style>